<template>
  <el-dialog v-model="model" @close="closedDialog">
    <el-form
      ref="opinionFormRef"
      :model="formOpinion"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item :label="$t('task.comment')" prop="comment">
        <el-input
          v-model="formOpinion.comment"
          :placeholder="$t('task.commentPlaceholder')"
          type="textarea"
          :rows="3"
          maxlength="100"
          show-word-limit
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closedDialog">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" @click="submitForm">
          {{ $t("common.confirm") }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { type FormRules } from "element-plus";
import { useI18n } from "vue-i18n";
import { type TaskResolveReq } from "xyvcard-workflow";

const { t } = useI18n();
const model = defineModel<boolean>();
const formOpinion = reactive<TaskResolveReq>({});
const emit = defineEmits(["submitForm"]);

const rules = reactive<FormRules<TaskResolveReq>>({
  comment: [
    { required: true, message: t("task.commentPlaceholder"), trigger: "blur" },
  ],
});
// 关闭弹框
function closedDialog() {
  if (model.value) {
    model.value = false;
  }
}

function submitForm() {
  emit("submitForm", formOpinion.comment);
}
</script>
